<template>
  <el-card class="box-card"
    ><el-form :inline="true" :model="form" class="demo-form-inline"
      ><el-form-item label="搜索"
        ><el-input
          v-model="form.keyword"
          placeholder="请输入用户名或邮箱"
        ></el-input></el-form-item
      ><el-form-item
        ><el-button type="primary" @click="handleSearch"
          >查询</el-button
        ></el-form-item
      ><el-form-item
        ><el-button type="success" @click="handleAdd"
          >添加</el-button
        ></el-form-item
      ></el-form
    ><el-table :data="tableData" border style="width: 100%"
      ><el-table-column prop="id" label="ID" width="80"></el-table-column
      ><el-table-column
        prop="username"
        label="用户名"
        width="180"
      ></el-table-column
      ><el-table-column prop="email" label="邮箱"></el-table-column
      ><el-table-column prop="avatar" label="头像" width="120"
        ><template slot-scope="scope"
          ><el-image
            :src="scope.row.avatar"
            fit="cover"
          ></el-image></template></el-table-column
      ><el-table-column fixed="right" label="操作" width="180"
        ><template slot-scope="scope"
          ><el-button type="primary" size="mini" @click="handleEdit(scope.row)"
            >编辑</el-button
          ><el-button type="danger" size="mini" @click="handleDelete(scope.row)"
            >删除</el-button
          ></template
        ></el-table-column
      ></el-table
    ><el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size.sync="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total.sync="total"
    ></el-pagination
  ></el-card>
</template>

<script>
import { getUserList, searchUser, deleteUser } from "@/api/user";
import { Message } from "element-ui";
export default {
  name: "UserList",
  data() {
    return {
      form: {
        keyword: "",
      },
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      getUserList({ page: this.currentPage, size: this.pageSize }).then(
        (response) => {
          this.tableData = response.data.rows;
          this.total = response.data.total;
        }
      );
    },
    handleSearch() {
      searchUser({ keyword: this.form.keyword }).then((response) => {
        this.tableData = response.data;
      });
    },
    handleAdd() {
      this.$router.push("/user/add");
    },
    handleEdit(row) {
      this.$router.push({ path: "/user/edit", query: { id: row.id } });
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除该用户，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteUser(row.id).then((response) => {
            if (response.data) {
              Message.success("删除成功");
              this.fetchData();
            } else {
              Message.error("删除失败");
            }
          });
        })
        .catch(() => {
          Message.info("已取消删除");
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
  },
};
</script>

<style scoped>
</style>